<template>
  <div class="dataDialog" @click="$emit('close')">
    <div class="block" @click.stop>
      <div class="top">
        <div class="dialog_title color-blue">/ A0006订单菜品状态</div>
        <div class="close">
          <img src="../assets/images/ic_close.png" @click="$emit('close')" alt />
        </div>
      </div>

      <div class="dialog_main dialog_main_scroll">
        <div class="dialog_data" v-for="(item, index) in foods" :key="index">
          <line-view class="dialog_hr"></line-view>
          <el-table :data="item" stripe class="dialog_table">
            <el-table-column label="序号" align="center" width="60px;">
              <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单号" align="center">
              <template slot-scope="scope">
                <span class="under-line">{{scope.row.mealId}}</span>
              </template>
            </el-table-column>
            <el-table-column label="菜品名" align="center" width="180px;">
              <template slot-scope="scope">
                <span>{{scope.row.dishName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="上菜用时" align="center">
              <template slot-scope="scope">
                <span class="c_cyan">{{scope.row.orderTime | countTime}}</span>
              </template>
            </el-table-column>
            <el-table-column label="菜品状态" align="center">
              <template slot-scope="scope">
                <span
                  :class="constData.foodsStatus[scope.row.taskStatus].class"
                >{{constData.foodsStatus[scope.row.taskStatus].name}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineView from "../components/LineView";
import { stepArr, getTimeDiffer } from "../util/index";
// import { formatTime, getTimeDiffer } from "../util/index";

const foodsStatus = {
  21: {name: '待分配', class: 'c_yellow'},
  22: {name: '制作中', class: 'c_yellow'},
  23: {name: '制作完成', class: 'c_cyan'},
  32: {name: '已叫车', class: 'c_cyan'},
  33: {name: '车已到', class: 'c_cyan'},
  34: {name: '上车中', class: 'c_cyan'},
  37: {name: '已上车', class: 'c_cyan'},
  38: {name: '云-运输中', class: 'c_cyan'},
  39: {name: '已送到', class: 'c_green'},
  310: {name: '下车中', class: 'c_green'},
  314: {name: '已完成', class: 'c_gray'},
  61: {name: '待运输', class: 'c_cyan'},
  63: {name: '地-运输中', class: 'c_cyan'},
  71: {name: '已选取', class: 'c_blue'},
  72: {name: '配送中', class: 'c_blue'},
  316: {name: '待取餐', class: 'c_blue'},
  317: {name: '已取餐', class: 'c_green'},
}
export default {
  data() {
    return {
      foods: [],
      constData: { foodsStatus }
    };
  },
  props: ["postData"],
  components: { LineView },
  created() {},
  mounted() {
    this.getFoods(this.postData);
  },
  methods: {
    getFoods(data) {
      this.foods = stepArr(data, 8);
    }
  },
  filters: {
    countTime(time) {
      let start = +new Date(time);
      let end = +new Date();
      return getTimeDiffer(start, end);
    }
  }
};
</script>

<style lang="less" scoped>
.dataDialog {
  height: 1080px;
  width: 1920px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ccc;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;

  .block {
    height: 666px;
    box-sizing: border-box;
    padding: 40px;
    background-color: rgba(12, 12, 63, 1);
    border: 2px solid rgba(89, 229, 254, 1);
    border-radius: 20px;

    .top {
      display: flex;
      justify-content: space-between;

      .dialog_title {
        font-size: 32px;
        font-weight: 700;
      }
    }

    .dialog_main {
      display: flex;
      justify-content: space-between;
      max-width: 1240px;
      overflow-x: auto;

      .dialog_data {
        margin-left: 40px;

        .dialog_table {
          width: 600px;
          height: 500px;
        }

        .dialog_hr {
          background-color: transparent;
          margin: 20px 0;
        }

        margin-bottom: 10px;
      }

      .dialog_data:first-child {
        margin-left: 0;
      }
    }

    .dialog_main_scroll {
      &::-webkit-scrollbar {
        width: 814px;
        height: 20px;
      }

      /*定义滚动条轨道 内阴影+圆角*/

      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 20px;
      }

      /*定义滑块 内阴影+圆角*/

      &::-webkit-scrollbar-thumb {
        border-radius: 20px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #59e5fe;
      }

      /*滑块效果*/

      &::-webkit-scrollbar-thumb:hover {
        border-radius: 20px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #59e5fe;
      }
    }
  }
}
</style>
